<template>
<div>
    <router-link 
       to="/" 
       tag="div" 
       class="header-abs"
       v-show="showAbs"
    >
        <div class="iconfont iconfanhui header-abs-back"></div>
    </router-link>
    <div 
        class="header-fixed" 
        v-show="!showAbs"
        :style="opacityStyle"
    >
        <router-link to="/">
            <div class="iconfont iconfanhui header-fixed-back"></div>
        </router-link>
        景点详情
    </div>
</div>
</template>

<script>
export default {
    name:'DetailHeader',
    data(){
        return{
            showAbs:true,
            opacityStyle:{
                opacity:0
            }
        }
    },
    methods:{
        handleScroll(){
            console.log(scroll)
            const top=document.documentElement.scrollTop||document.body.scrollTop;
            if(top>50){
                let opacity=top/140;//渐隐渐现效果
                opacity=this.opacity>1?1:opacity;//限定opacity值在0~1之间，不然会出错
                this.opacityStyle={opacity};//与data的数据绑定
                this.showAbs=false;
            }else{
                this.showAbs=true;
            }
        }
    },
    activated(){//仅这样写毕竟是全局事件绑定，还是有一定风险
        window.addEventListener('scroll',this.handleScroll)
    },
    deactivated(){//在组件停用时调用，这里用来解绑全局绑定
        window.removeEventListener('scroll',this.handleScroll)
    }
}
</script>

<style scoped>
.header-abs{
    position: absolute;
    left:0.2rem;
    top:0.2rem;
    width:0.8rem;
    height:0.8rem;
    line-height: 0.8rem;
    border-radius: 0.4rem;
    text-align: center;
    background:rgba(0,0,0,0.8);
}
.header-abs-back{
    color:white;
    font-size:0.4rem;
}
.header-fixed{
    z-index:2;
    position: fixed;
    top:0;
    left: 0;
    right:0;
    height:0.86rem;
    line-height: 0.86rem;
    text-align:center;
    color: #fff;
    background:#00bcd4;
    font-size:0.32rem;
}
.header-fixed-back{
    position: absolute;
    top:0;
    left:0;
    color: #fff;
    width:0.64rem;
    text-align: center;
}
</style>